<template>
  <div style="width:200px;margin:0 auto;">
    <div><button @click="title=!title">transition按钮</button></div>
    <transition name="why">
       <span v-show="title">hellow</span>
    </transition>
    <div><button @click="flag=!flag">animation按钮</button></div>
    <transition name="animation">
       <h2 v-show="flag">hellow</h2>
    </transition>
    <transition name="animation" mode="out-in" appear>
      <!-- key的作用是当key的值被修改的时候<h2> 总是会被替换而不是更新，因此触发transition过度效果 -->
      <h2 :key="titsssle">{{ titsssle }}</h2>
       <!-- <h2>{{ titsssle }}</h2> -->
    </transition>
  </div>
  
</template>

<script setup>
  import {ref} from 'vue'
  const title=ref(true)
  const flag=ref(true)
  const titsssle=ref("xioa")
  setTimeout(()=>{
    titsssle.value="jdhf"
  },2000)
</script>

<style scoped>
.why-enter-from,
.why-leave-to{
  opacity: 0;
}
/* .why-enter-to,
.why-leave-from{
  opacity: 1;
} */
.why-enter-active,
.why-leave-active{
  transition:all 2s ease
}


.animation-enter-active{
  animation:identifier 2s ease
}
.animation-leave-active{
   animation:identifier 2s reverse
}
@keyframes identifier {
  0%{
    transform:scale(0)
  }
  50%{
    transform:scale(1.5)
  }
  100%{
    transform:scale(1)
  }
}
</style>